<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/pure-min.css" />
    <link rel="stylesheet" type="text/css" href="css/layer.css" />
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <style>
        body {
            overflow: hidden;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -ms-user-select: none;
        }

        div.label-item {
            background-color: #fff;
            border: 1px solid #ddd;
            background-size: auto 100%;
            background-repeat: no-repeat;
        }
    </style>
    <script data-main="js/design" src="js/require-2.3.6.min.js"></script>
    <title>标签设计</title>
</head>

<body data-debug="true">
    <div class="wrap">
        <div class="appbar app-color-dark-gray">
            <span class="title">标签设计</span>
            <div class="actions">
                <a href="javascript:void(0);" data-action="more"><img src="images/ic_menu_normal.png"></a>
            </div>
        </div>
        <div id="control-icons" class="control-icons app-color-dark-gray">
            <!-- <img class="device-item" src="images/select.png"> -->
            <img class="control-item" data-type="text" src="images/icon-text.png">
            <img class="control-item" data-type="code" src="images/icon-code.png">
            <img class="control-item" data-type="image" src="images/icon-ccc.png">
            <img class="control-item" data-type="image" src="images/icon-qrcode.png">
            <img class="control-item" data-type="image" src="images/icon-logo.png">
            <!-- <img class="control-item" data-type="line" src="images/icon-line.png"> -->
        </div>
        <div id="design-zone">
            <div class="label-wrap">
                <img src="api/label/label-back.png" style="float: left;">
                <form action="#">
                </form>
            </div>
        </div>
        <div class="properties">
            <div class="btns">
                <p>
                    <button data-action="preview" class="pure-button">打印预览</button>
                    <button data-action="saveLabel" class="pure-button">保存格式</button>
                    <button data-action="gotoPrint" class="pure-button">去打印</button>
                </p>
            </div>
            <form action="#">
                <table class="pure-table pure-table-horizontal pure-table-odd">
                    <thead>
                        <tr>
                            <th>属性</th>
                            <th>值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>名称:</td>
                            <td>
                                <input name="id" value="" readonly="readonly">
                            </td>
                        </tr>
                        <tr>
                            <td>值:</td>
                            <td>
                                <input name="value" value="未指定">
                            </td>
                        </tr>
                        <tr>
                            <td>左边距:</td>
                            <td>
                                <input name="left" value="0">
                            </td>
                        </tr>
                        <tr>
                            <td>上边距:</td>
                            <td>
                                <input name="top" value="0">
                            </td>
                        </tr>
                        <tr>
                            <td>宽度:</td>
                            <td>
                                <input name="width" value="200">
                            </td>
                        </tr>
                        <tr>
                            <td>高度:</td>
                            <td>
                                <input name="height" value="20">
                            </td>
                        </tr>
                        <tr>
                            <td>字体:</td>
                            <td>
                                <select name="fontName">
                                    <option>微软雅黑</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>加粗:</td>
                            <td>
                                <select name="fontBold">
                                    <option value="false">不加粗</option>
                                    <option value="true">加粗</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>字体大小:</td>
                            <td>
                                <input name="fontSize" value="11">
                            </td>
                        </tr>
                        <tr>
                            <td>图片:</td>
                            <td>
                                <input name="imageSrc" value="">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
            <div class="btns app-h-center">
                <p>
                    <button data-action="updateDesign" class="pure-button">更新</button>
                    <span>&emsp;&emsp;</span>
                    <button data-action="deleteItem" class="pure-button">删除</button>
                </p>
            </div>
        </div>
    </div>
    <script type="text/html" id="font-names-tpl">
    {{each items item index}}
    <option value="{{item}}">{{item}}</option>
    {{/each}}
</script>
    <!-- <script src="http://localhost:8000/CLodopfuncs.js"></script> -->
</body>

</html>